import React, { Component } from 'react'
import './News.css'
import { connect } from 'react-redux'
import store from '../../redux/store'
import { NavBar, List } from 'antd-mobile'
import TabBar from '../../components/TabBar/TabBar'
import { getChatListAction } from '../../redux/common-action'

class News extends Component {
  state = {
    chatList: null
  }
  componentDidMount() {
    this.props.getChatListAction(this.props.myInfo._id)
    store.subscribe(() => {
      if (this.props.chats) {
        console.log(this.props.chats)
        this.setState({ chatList: this.props.chats.chatList })
      }
    })
  }
  render() {
    const chatList= this.state.chatList
    return (
      <div>
        <NavBar backArrow={false}>消息页面</NavBar>
        <div className="news-box">
          <List>
            {
              chatList && chatList.map((item, i) => (
                <List.Item
                  key={i}
                  prefix={<img src={item.header} alt="" />}
                  onClick={() => { }}>
                  {item.username}
                </List.Item>
              ))
            }
          </List>
        </div>
        <TabBar index='1' />
      </div>
    )
  }
}
export default connect(
  state => ({ chats: state.chat, myInfo: state.user }),
  { getChatListAction }
)(News)